<template>
	<a-modal :visible="visible" :mask="false" :closable="false" :footer="null" width="320px" class="profile-dialog" @cancel="onProfileClose">
		<a-result :title="currentUser.name" sub-title="欢迎回来">
			<template #icon>
				<a-avatar :src="currentUser.headPortraitUrl" :size="100">
					<template #icon>
						<user-outlined />
					</template>
				</a-avatar>
			</template>
		</a-result>
		<a-list :data-source="profiles" class="user-profile-list">
			<template #renderItem="{item}">
				<a-list-item>
					<template #actions>
						<a-button type="text" @click="item.handler(item)">
							<template #icon>
								<svg-icon :icon-class="item.icon"></svg-icon>
							</template>
						</a-button>
					</template>
					<a-list-item-meta :title="item.title" :description="item.value" />
				</a-list-item>
			</template>
		</a-list>
	</a-modal>
	<reset-password-dialog v-model:visible="visibles.resetPass" />
</template>

<script lang="ts">
	import {UserOutlined} from '@ant-design/icons-vue'
	import {defineComponent, reactive, ref, toRefs} from 'vue'
	import {useStore} from '@/store/index'
	import ResetPasswordDialog from '@/components/dialog/reset-password-dialog.vue'

	export default defineComponent({
		name: 'ProfileDialog',
		props: {
			visible: Boolean
		},
		components: {
			UserOutlined,
			ResetPasswordDialog
		},
		setup(props: any, {emit}) {
			const store = useStore()
			const state = toRefs(props)

			// 将所有显示隐藏字段放在一起维护
			const visibles = reactive({
				resetPass: false
			})

			const currentUser: any = store.currentUser
			const hiddenPhone = currentUser.name.replace(/(\d{3})\d*(\d{4})/, '$1****$2')

			const profiles = ref([
				{
					title: '用户名',
					value: hiddenPhone,
					icon: 'eye-hidden',
					hidden: true,
					handler(menu: any) {
						const hidden = menu.hidden

						menu.hidden = !hidden

						if (hidden) {
							menu.icon = 'eye-visible'
							menu.value = currentUser.phone
						} else {
							menu.value = hiddenPhone
							menu.icon = 'eye-hidden'
						}
					}
				},
				{
					title: '账号密码',
					value: '********',
					icon: 'edit',
					handler() {
						visibles.resetPass = true
					}
				}
			])

			const onProfileClose = () => {
				emit('update:visible', false)
			}

			return {
				...state,
				profiles,
				visibles,
				currentUser,
				onProfileClose
			}
		}
	})
</script>

<style lang="less">
	.profile-dialog {
		top: 14px !important;
		right: 60px !important;
		width: 320px !important;
		position: absolute !important;

		.ant-result {
			padding: 0;
		}

		.user-profile-list {
			margin-top: 24px;
			border-style: solid;
			border-width: 1px 0;
			border-color: @border-color-light;

			.ant-list-item {
				padding: 24px 0 16px;
			}
		}
	}
</style>
